<template>
  <div>
    <div class="timer">
      <p class="color-f mg-2 font-14">{{ $t("detail.america_time") }}</p>
      <div v-if="intervalFlag" id="demo" class="flex-s-around">
        <div class="flex-n-center">
          <div class="timer-num">{{ days }}</div>
          <div class="timer-cal">{{$t('detail.interval_Day')}}</div>
        </div>
        <div class="flex-n-center ">
          <div class="timer-num">{{ hours }}</div>
          <div class="timer-cal">{{$t('detail.interval_Hrs')}}</div>
        </div>
        <div class="flex-n-center ">
          <div class="timer-num">{{ minutes }}</div>
          <div class="timer-cal">{{$t('detail.interval_Min')}}</div>
        </div>
        <div class="flex-n-center ">
          <div class="timer-num">{{ seconds }}</div>
          <div class="timer-cal">{{$t('detail.interval_Sec')}}</div>
        </div>
      </div>
      <div v-else class="text-c">{{$t('tips.order_close')}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'interval',
  props: ['date'],
  data () {
    return {
      timerdate: Math.trunc(this.date),
      nowTime: Math.trunc(new Date().getTime() / 1000),
      intervalFlag: true
    }
  },
  computed: {
    seconds () {
      return (this.timerdate - this.nowTime) % 60 >= 0 ? (this.timerdate - this.nowTime) % 60 : 0
    },
    minutes () {
      return Math.trunc((this.timerdate - this.nowTime) / 60) % 60 >= 0 ? Math.trunc((this.timerdate - this.nowTime) / 60) % 60 : 0
    },
    hours () {
      return Math.trunc((this.timerdate - this.nowTime) / 60 / 60) % 24 >= 0 ? Math.trunc((this.timerdate - this.nowTime) / 60 / 60) % 24 : 0
    },
    days () {
      return Math.trunc((this.timerdate - this.nowTime) / 60 / 60 / 24) >= 0 ? Math.trunc((this.timerdate - this.nowTime) / 60 / 60 / 24) : 0
    }
  },
  created () {
    console.log(this.timerdate, this.nowTime)
    if (this.nowTime > this.timerdate) {
      this.intervalFlag = false
    }
  },
  mounted () {
    // console.log(this.timerdate,this.date)
    console.log(this.intervalFlag)
    if (this.intervalFlag) {
      window.setInterval(() => {
        this.nowTime = Math.trunc(new Date().getTime() / 1000)
      }, 1000)
    }
  }
}
</script>
